<template>
  <scroll class="suggest" :data="result" :pullup="pullup"
          @scrollToEnd="searchMore" ref="suggest" :beforeScroll="beforeScroll" @beforeScroll="listScroll"
  >
    <ul class="suggest-list">
      <li class="suggest-item" @click="selectItem(item)" v-for="(item, index) in result" :key="index">
        <div class="icon">
          <i :class="getIconCls(item)"></i>
        </div>
        <div class="name">
          <p class="text" v-html="getDisplayName(item)"></p>
        </div>
      </li>
      <loading v-show="hasMore" title="" />
    </ul>
    <div v-show="!hasMore && !result.length" class="no-result-wrapper">
      <no-result title="抱歉, 暂无搜索结果" />
    </div>
  </scroll>
</template>

<script>
import { getSearchList, getSongsUrls } from '../../api/index'
import { createSong } from '../../assets/js/song'
import Scroll from '../../base/scroll/Scroll'
import Loading from '../../base/loading/Loading'
import NoResult from '../../base/no-result/NoResult'
import { mapActions } from 'vuex'

export default {
  name: 'Suggest',
  props: {
    query: {
      type: String,
      default: ''
    },
    showSinger: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      result: [],
      page: 1,
      limit: 30,
      pullup: true,
      beforeScroll: true,
      hasMore: true // 根据搜索结果列表判断是否还可以继续往下搜索
    }
  },
  methods: {
    search() {
      this.page = 1 // 当我们改变了query, page要变成原始值1
      this.hasMore = true
      this.$refs.suggest.scrollTo(0, 0) // 当我们改变了query, 搜索结果列表滚动回顶部
      const searchQuery = this.query.trim()
      if (searchQuery === '') return
      getSearchList({ offset: this.limit * (this.page - 1), limit: this.limit, keywords: searchQuery }).then(res => {
        if (res.statusText === 'OK') {
          console.log(res)
          // 这里教学中搜索到的内容分两个对象, 一个对象是zhida(优先级高), 其中搜索到的内容有歌手和歌曲的类型区分
          this.result = this._genResult(res.data.result.songs)
          console.log(this.result)
          // 这里检查搜索到的数据看是否还能再接下去继续搜索
          this._cheackMore(res.data.result.songs)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    searchMore() {
      if (!this.hasMore) {
        return
      }
      if (this.query === '') return
      this.page++
      getSearchList({ offset: this.limit * (this.page - 1), limit: this.limit, keywords: this.query }).then(res => {
        if (res.statusText === 'OK') {
          this.result = this.result.concat(this._genResult(res.data.result.songs))
          this._cheackMore(res.data.result.songs)
        }
      })
    },
    getIconCls(item) {
      if (item.id) {
        // 这里是判断搜索到的是歌手还是歌曲,样式做改变, 但是我这里只搜索歌曲,就不判断了
        return 'iconfont icon-favorite'
      }
    },
    getDisplayName(item) {
      // 这里应该再对对象是否是歌曲还是歌手再做判断 if (item.type === TYPE_SINGER)
      // return `${item.name} - ${filterSinger(item.artists)}`
      return `${item.name} - ${item.singer}`
    },
    selectItem(item) {
      // if (item.type === TYPE_SINGER) {
      //   const singer = new Singer({
      //     id: item.singermid,
      //     name: item.singername
      //   })
      //   this.$router.push({
      //     path: `/search/${singer.id}`
      //   })
      //   this.setSinger(singer) // 使用mutation设置singer的数据
      // }
      getSongsUrls({ id: item.id }).then(res => {
        if (res.statusText === 'OK') {
          const songUrl = res.data.data[0].url
          if (!songUrl) {
            // 这里应该提示歌曲无版权
            return
          }
          item.url = res.data.data[0].url
          // 通过action来添加歌曲进入播放状态
          this.insertSong(item)
        }
      })

      // 这里点击歌曲的事件再派发出去, 因为其他点击歌曲另外做的事情不是这里该做的了
      this.$emit('select')
    },
    refresh() {
      // 定义一个suggest组件的一个刷新函数代理 (给外部使用$refs....调用这个组件的刷新) 其实就是父组件
      this.$refs.suggest.refresh()
    },
    listScroll() {
      // 滚动开始前这里给父组件派发一个事件
      this.$emit('listScroll')
    },
    _cheackMore(data) {
      // 这里检查搜索到的数据看是否还能再接下去继续搜索
      const song = data
      if (!song.length || song.length <= this.limit) {
        this.hasMore = false
      }
    },
    _genResult(data) {
      let ret = []
      if (data.length) {
        ret = this._normalizeSongs(data)
      }
      return ret
    },
    _normalizeSongs(list) {
      const ret = []
      list.forEach(musicData => {
        if (musicData.id && musicData.album.id) {
          ret.push(createSong(musicData))
        }
      })
      return ret
    },
    ...mapActions([
      'insertSong'
    ])
  },
  watch: {
    // 监听query检索词的变化, 然后向服务端发送对应请求
    query() {
      this.search()
    }
  },
  components: {
    Scroll,
    Loading,
    NoResult
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/variable.scss";
@import "../../assets/css/mixin.scss";

.suggest{
  height: 100%;
  overflow: hidden;
  .suggest-list{
    padding: 0 30px;
    .suggest-item{
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      .icon{
        flex: 0 0 30px;
        width: 30px;
        i{
          font-size: 14px;
          color: $color-text-d;
        }
      }
      .name{
        flex: 1;
        font-size: $font-size-medium;
        color: $color-text-d;
        overflow: hidden;
        .text{
          @include no-wrap();
        }
      }
    }
  }
  .no-result-wrapper{
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>